<template>
   <div class="photoinfo-container">
        <!-- <h2>1-----{{id}}</h2> -->
        <h2 class="phototitle">{{ photoinfo.title }}</h2>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat()}}</span>
            <span>点击：{{ photoinfo.click }}次</span>
        </p>
    <hr>
        <!-- 缩略图区域 -->
      
            <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">   -->
            <!-- vue-preview使用方法已经更新了，上面的是老式的 -->
            <div>
                <vue-preview :slides="list" @close="handleClose" class="preview"></vue-preview>
            </div>
            
            



        <div class="conetent" v-html="photoinfo.content"></div>
        <div>
            <comment :id='this.id'></comment>
        </div>
    </div>
</template>

<script>
//导入评论子组件
import comment from '../subcomponents/comment.vue'

import { Toast } from "mint-ui";
export default {
    data() {
        return {
            list:[],
            id: this.$route.params.id ,//获取url中传递的id值,
            photoinfo:{}//因为获取到的result.body.message是一个数组，用对象来包裹
        };
    },
    created(){
        this.getphotoinfo();
        this.getImageinfo();
    },
    methods: {
        getphotoinfo(){
            this.$http.get('api/getimageInfo/'+this.id).then(result=>{
                if(result.body.status ===0){
                    this.photoinfo = result.body.message[0]
                }else{
                    Toast("加载详细信息失败。。。");
                }
            })
        },
        getImageinfo(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status===0){
                    result.body.message.forEach(item=>{
                        item.w = 600;
                        item.h = 400;
                        item.msrc = item.src;
                        item.src = item.src;
                    })
                    this.list = result.body.message
                }else{
                    Toast("加载缩略图详细信息失败。。。");
                }
            })
        }
    },
    components:{
        comment:comment
    } 
};
</script>

<style lang="scss">
.photoinfo-container{
    padding: 0 4px;
    .phototitle{
        font-size: 16px;
        text-align: center;
        margin:15px 0;
        color: red;
    }
     .subtitle{
         font-size: 13px;
         color: blue;
         display: flex;
         justify-content: space-between;
     }


    //  缩略图样式
    /*图片预览 缩略图*/
/*图片预览 缩略图*/
.preview figure {
  display: inline-block;
  width: 30%;
  height:calc(30vw - 0px);
  margin: 1.5%;
}

.preview figure img {
  width: 100%;
}


}
</style>
